<template>
  <div> 
    <setHeader :title="headerTitle" @done="gotobtn()"></setHeader>
    <div class="content" style="background-color: #f5f5f5;">
      <!-- 全部同事搜索 -->
      <div class="editorial_content_coll">
          <el-row class="block-col-2">
              <el-col :span="24">
                  <el-dropdown trigger="click" @command="handleCommand" >
                      <span class="el-dropdown-link" style="padding: 0 0.2rem;">
                          {{colleagueName}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown" style="width: 100%;margin-left: -50% !important; margin-top:-0 !important;left:50% !important;padding:0.12rem 0 !important; max-height: 6rem;overflow-y: scroll;">
                          <el-dropdown-item icon="el-icon-plus" v-for="(colleague, ind) in ColleagueList" :key="ind" :command="colleague" :style="colleague.style">{{colleague.name}}</el-dropdown-item>
                      </el-dropdown-menu>
                  </el-dropdown>
              </el-col>
          </el-row>  
      </div>
      <!-- 新的同事--待审核 -->
      <div class="main-myColl-colleague" v-show="new_show">
          <div class="title_text_more">
            <h3>{{newTeam}}</h3>
            <!-- <a v-show="waitFlag1" @click="auditlist()" href="javascript:void(0)">更多<i class="iconfont icon-xiangyou"></i></a> -->
          </div>
          <div class="company_list_item">
              <div class="emptyProduct" v-if="waitUserInfo == ''">
                  <img src="../common/images/empty.png" alt="">
                  <p>小主人，您的待审核同事还没有哦~!</p>
              </div>
              <ul class="main-colleague">
                  <li class="clear" v-for="wi in waitUserInfo.slice(0,5)" v-show="waitFlag1" :key="wi">
                      <div class="right_img fl" @click="goCheckInfo(wi.uid)">
                        <img :src="wi.userhead" v-if="wi.userhead"/>
                        <img src="../common/images/c_03.jpg" alt="" v-else>
                      </div>  
                      <div class="right_center_desc fl">
                        <h5>{{wi.username}}</h5>
                        <p>{{wi.d_name}}</p>
                      </div> 
                      <div class="right_notice fr">
                        <!-- 状态随便写的，接口可以运行后再改过来 -->
                        <button class="right_refused" v-if="wi.check ==2">已拒绝</button>
                        <button @click="Audit(wi)">待审核</button>
                      </div>                 
                  </li>
                  <!-- <li v-show="waitFlag2" style = "width: 100%; text-align: center; margin-left: 0; padding-bottom: 0;">
                      <span class="noData">—暂无数据—</span>                        
                  </li> -->
              </ul>
          </div> 
      </div>
      <!-- 公司同事 -->
      <div class="main-myColl-colleague">
          <div class="title_text_more">
            <h3>{{teamName}}</h3>
          </div>
          <div class="company_list_item">
              <div class="emptyProduct" v-if="checkUserInfo == ''">
                  <img src="../common/images/empty.png" alt="">
                  <p>小主人，您的公司同事还没添加呢~请赶紧添加吧!</p>
              </div>
              <ul class="main-colleague">
                  <li class="clear" v-for="wi in checkUserInfo" v-show="checkFlag1" :key="wi.id" @click="goCheckInfo(wi.uid)">
                      <div class="right_img fl">
                        <img :src="wi.userhead" v-if="wi.userhead"/>
                        <img src="../common/images/c_03.jpg" alt="" v-else>
                      </div>      
                      <div class="right_center_desc fl">
                        <h5>{{wi.username}}</h5>
                        <p>{{wi.d_name}}</p>
                      </div> 
                  </li>
                  <!-- <li v-show="checkFlag2" style = "width: 100%; text-align: center; margin-left: 0; padding-bottom: 0;">
                      <span class="noData">—暂无数据—</span>                        
                  </li> -->
                  <!-- <li v-for="n in Array(10)">
                    <img src="../common/images/cir_07.jpg" alt="">
                  </li> -->
              </ul>
          </div> 
      </div>
    </div>
    <div class="dialog__wrap" v-show="stateShow">
      <transition name="background-fade" @after-leave="afterLeave">
          <div class="dialog__background" v-if="show"></div>
      </transition>
      <transition name="fade-move">
          <div class="dialog" v-if="show">
              <div class="dialog__head">
                  <span class="dialog__head__title">
                      审核信息
                  </span>
                  <i class="iconfont icon-cuo dialog__head__btn" @click="close"></i>
              </div>
              <div class="dialog__body">
                  <div class="dialog__body__top clear">
                    <div class="dialog__body__top__img fl">
                      <img :src="check_info.userhead" v-if="check_info.userhead"/>
                        <img src="../common/images/c_03.jpg" alt="" v-else>
                    </div>
                    <div class="dialog__body__top__desc fl">
                      <h5>{{check_info.username}}<span>{{check_info.d_name}}</span></h5>
                      <p>{{check_info.apply_info}}</p>
                    </div>
                  </div>
                  <div class="dialog__body__bottom">
                    <label for="">职位：</label>
                    <!-- 渲染的职位相等于弹框的职位 -->
                    <span @click="selectIndustry">{{departname}}<i class="iconfont icon-xialaanniu"></i></span>
                  </div>
              </div>
              <div class="dialog__footer">
                  <button class="dialogbtnner" @click="agree(2)" :disabled="pending">拒绝</button>
                  <button class="dialogbtnner" @click="agree(1)" :disabled="pending">同意</button>
              </div>
          </div>
      </transition>
    </div>

    <!-- 职位 -->
    <IndustryLinkage ref="children" v-show="industryShow" @departname="showIndustry" @departId="showIndustryId" @done="closeAdd" :jobshow="true" :Depart="Depart" :departIds="departIds"></IndustryLinkage>
    <so-footer></so-footer>
  </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import { MessageBox } from 'mint-ui';
import IndustryLinkage from '@/components/industry_linkage';
import {createGroup,friendList} from '../api/api';
import soFooter from '../components/footer-bar';
  export default {
    data() {
      return {
        headerTitle:'我的同事',
        colleagueName: '全部同事',
        Depart: '',
        ColleagueList: [],    //全部同事组织架构
        userInfo:'',
        JoinList:'',
        value:'',
        cid:'1',
        cpId:'',
        deId: '',
        waitUserInfo: [{},{}],
        checkUserInfo: [],
        waitFlag1: true,
        // waitFlag2: false,
        checkFlag1: true,
        // checkFlag2: false,
        isAdmin: false,
        type:'',
        newTeam:'新的同事',
        teamName:'公司同事',
        new_show:false,//同事申请列表
        // 弹框
        stateShow: false,    //添加同级和下级弹框显示或隐藏
        show: false,         //弹框
        pending: false,
        // 选择职位
        industryShow: false,
        departname: '',       //组件选择的职位名字
        departId: '',       //职位对应的id
        departIds:'22',
        // 申请列表
        applylist: {
            userId: '',
            cp_id: '',
            check_userId: '',
            reject: ''
        },
        check_id:'',
        check_info:'',
      };
    },
    components:{
      setHeader,
      IndustryLinkage,
      soFooter
    },
    created() {
        let that = this;
        that.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
        that.access_token = window.localStorage.getItem('access_token');
        //获取当前企业所有成员
        
        that.cpId = this.$route.query.cp_id;
        that.getCompanyColleague(that.cpId);
        that.type = this.$route.query.type;
        if(that.type==1){
          that.headerTitle = '我的员工';
          that.newTeam = '待审核';
          that.teamName = '公司同事';
          that.new_show = true;
        }
        // 获取当前组织架构
        this.getDepartSame(0);
    },
    methods: {
      // 组织架构
      getDepartSame(deId) {
         console.log(deId)
         this.$post(this.$path+'/api.php/company/getCompanyAuthi',{cp_id:this.cpId,access_token:this.access_token}).then((response) => {
          // this.$fetch(this.$path + '/index.php/api/company/depart/'+this.cpId).then((response) => {
              console.log('搜索同事1122',response);
              if(response.code == 200) {
                  this.ColleagueList = response.data;
                  let aa = {'id':0,'name':'全部同事','level':0};
                  this.ColleagueList.unshift(aa);
                  this.ColleagueList.forEach((element,index) => {
                      if(element.level == 1) {
                          this.ColleagueList[index].style = 'padding-left: 0.2rem';
                      }else if(element.level == 2){
                          this.ColleagueList[index].style = 'padding-left: 0.6rem';
                      }else if(element.level == 3){
                          this.ColleagueList[index].style = 'padding-left: 1rem';
                      }
                  });
                  
                  // console.log('企业组织结构',this.ColleagueList);
              }
          })
      },
      // 点击下拉选择需要的部门
      handleCommand(command) {
          let deId = command.id;
          this.deId = command.id;
          this.colleagueName = command.name;
          let type =2;//状态 1已审核
          this.$fetch(this.$path + '/index.php/api/company/getDepartUser/'+deId+ '/' +this.cpId+'/'+type).then((response) => {
              if(response.code == 200) {
                  this.waitUserInfo = response.data.wait
                  if(response.data.chec){
                    //清除当前登陆用户的数据
                    // response.data.chec.forEach((el,index) =>{
                    //     if(el.uid == this.userInfo.uid){
                    //       response.data.chec.splice(index,1); 
                    //     }
                    // })
                    // console.log('demo',response.data.chec);
                  }
                  this.checkUserInfo = response.data.chec
              }else{
                  this.waitUserInfo = []
                  this.checkUserInfo = []
              }
          })
      },
      // checkOK(msg){
      //   var userId = this.userInfo.uid
      //   var cp_id = msg[0]
      //   var check_userId = msg[1]
      //   this.$fetch(this.$path+ '/api.php/company/checkUserInCompany', {userId,cp_id,check_userId}).then((response) => {
      //     if(response.code == 200 ){
      //       MessageBox.alert(response.msg).then(action => {
      //         this.getCompanyColleague(this.cpId)
      //       }); 
      //     }else{
      //       MessageBox('提示', response.msg)
      //       return false
      //     }
      //   })
      // },
      //获取当前企业所有成员
      getCompanyColleague(cp_id){
        var userId = this.userInfo.uid
        var type = 2;
        this.$fetch(this.$path + '/index.php/api/company/getDepartUser/0/' +cp_id+'/'+type).then((response) => {
          console.log('所有成员',response);
          if(response.code == 200){
            this.waitUserInfo = response.data.wait;
           
            // if(response.data.chec){
            //   //清除当前登陆用户的数据
            //   response.data.chec.forEach((el,index) =>{
            //       if(el.uid == userId){
            //         response.data.chec.splice(index,1); 
            //       }
            //   })
            //   // console.log('demo',response.data.chec);
            // }
             this.checkUserInfo = response.data.chec;
            if(!response.data.wait.length){
              this.waitFlag1 = false;
              // this.waitFlag2 = true;
              // 待审核无数据则整个不显示
              // this.new_show = false;
            }
            if(response.data.chec.length == 0){
              // 公司同事有则显示，无则显示暂无数据
              this.checkFlag1 = false;
              // this.checkFlag2 = true;
            }
          }else{
            this.waitFlag1 = false;
            // this.waitFlag2 = true;
            this.checkFlag1 = false;
            // this.checkFlag2 = true;
          }
          if(response.data.isAdmin == 1){
            this.isAdmin = true;
          }
        })
      },

      //查看申请用户
      goCheckInfo(lookUid){
        this.$router.push({path: '/colleagueInfo', query: {cp_id:this.cpId,lookUid:lookUid,checkFlag:this.type}});
      },
      //点击更多进入新同事审核
      auditlist() {
        this.$router.push({
          path: '/applicationList',
          query: {cp_id:this.cpId}
        })
      },
      //查看已审核用户
      // goInfo(lookUid){
      //   this.$router.push({path: '/colleagueInfo', query: {cp_id:this.cpId,lookUid:lookUid}}); 
      // },
        Audit(val) {
          console.log('001',val);
          this.check_info = val;
          this.check_id = val.uid;
          this.departname = val.d_name;
          this.departId = val.architeId;
          // 弹框出现
          this.show = true;
          this.stateShow = true;
          
        },
        // 关闭弹框
        afterLeave() {
          this.stateShow = false;
        },
        close() {
          this.show = false;
        },
        // 拒绝
        // refused() {
        //   this.show = false;
        // },
        // 同意通过审核
        agree(reject) {
          let that = this;
          that.applylist.userId = that.userInfo.uid;//当前用户id
          that.applylist.check_userId =  that.check_id ;//被审核的用户id
          that.applylist.reject = reject;//状态 通过或者拒绝
          that.applylist.cp_id = that.cpId;
          that.applylist.architeName = that.departname;
          that.applylist.architeId = that.departId;
          console.log('uid',that.check_id)
          console.log('reject',that.applylist);
          that.$fetch(that.$path+'/api.php/Company/checkUserInCompany', that.applylist).then((res) => {
                    console.log('审核同事22', res);
                    if(res.code == 200) {
                      if(reject == 1){
                        //审核通过
                          //加入群聊
                        that.$store.commit('setPage', 2);//设置需要预请求的参数
                          //返回群聊id和0
                        createGroup({name: '',gId:res.data.c_ImId,tId:res.data.im_user,g_type:1}).then(ress => {
                          console.log('aa',ress);
                          if (parseInt(ress.status) !== 0) {
                            that.$openTips({
                                text: '审核成功',
                                time: 1000
                            })
                            that.$store.commit('setPage', 1);//设置需要预请求的参数
                            that.getCompanyColleague(that.cpId);
                          }
                        })
                      }else{
                        //审核拒绝
                        that.$openTips({
                            text: '审核成功',
                            time: 1000
                        })
                        this.show = false;
                        this.getCompanyColleague(this.cpId);
                      }
                      
                        if(reject == 1) {
                            list.check = 1;
                        }
                        else if(reject == 2) {
                             list.check = 2;
                        }
                    }
                })
          this.show = false;
        },
			//点击选择职位
      selectIndustry(){
        // console.log
          this.industryShow = !this.industryShow;
          // this.departname = data.target.innerText;
          this.Depart = this.departname;
          // this.departIds = this.departId;
          this.$refs.children.say(this.departId);
      },
      //选择职位
      showIndustry(data) {
          console.log('选择的职位',data);
          // 选择的数据
          this.departname = data;
          this.Depart = data;
          // this.Depart = this.departname;
          console.log('职位名字',this.Depart);
          
          this.industryShow = false;
      },
      // 选择好后关闭职位
      showIndustryId(data) {
        console.log('选择的职位Id',data);
        // 职位对应的id
          this.departId = data;
          this.industryShow = false;
      },
      // 关闭选择职位
      closeAdd() {
          this.industryShow = false;
      },

    }
  }

</script>
<style >
[class*=" el-icon-"], [class^=el-icon-] {
  display: none;
}
.editorial_content_coll .el-row {
    background-color: #FFF;
    border-bottom: 0.2rem solid #f5f5f5;
}
/* 全部同事 */
.editorial_content_coll .el-col-24 {
    height: 1rem;
    line-height: 1rem;
    /* padding: 0 0.2rem; */
    box-sizing: border-box;
}
/* 全部同事第一层级 */
.editorial_content_coll .el-col-24 .el-dropdown {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    display: block;
}
/* 文字 */
.editorial_content_coll .el-dropdown-link {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    cursor: pointer;
    display: block;
    /* padding: 0 0.2rem; */
}
  /* 下拉icon */
.editorial_content_coll .el-icon--right {
    float: right;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
}
/* 下拉层级 */
/* .editorial_content_coll .el-dropdown-menu { */
    /* width: 7rem !important;
    height: auto;
    box-shadow: none;
    left: 50% !important;
    margin: 0;
    margin-left: -3.5rem;
    padding: 0;
    margin-top: 0 !important; */
/* } */
/* .editorial_content_coll .el_down_item {
  top: 5rem !important;
  width: 7rem !important;
} */
/* 三角符号 */
.el-popper .popper__arrow, .el-popper .popper__arrow::after {  
    display: none;
}
/* 下拉item */
.editorial_content_coll .el-dropdown-menu__item {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    padding: 0 0.2rem;
    box-sizing: border-box;
}


.main-center-join-list{
    text-align: left;
    margin-left: 2%;
    float: left;
    width:55%;
}
.main-center-join-list h5{
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.main-center-join-list p{
  font-size: 14px;
  color:#999999;
}
.main-right {
  float: left;
  width: 20%;
}
.main-right .el-button {
    width: 60px;
    padding: 8px 10px;
    border-radius: 0;
    color: #fff;
    background:#ee7676;
}
.comColl{
  margin-top: 15px;
}

/* 我的同事 */

.main-myColl-colleague {
    background-color: #fff;
    margin-bottom: 0.2rem;
}

.noData {
    font-size: 0.34rem;
    color: #333;
}

/* 待审核同事渲染 */

.main-myColl-colleague .company_list_item .main-colleague>li {
    width: 100% !important;
    height: 1.48rem;
    padding: 0 0.2rem;
    border-bottom: 1px solid #d8d8d8;
    box-sizing: border-box;
}
.main-myColl-colleague .company_list_item .main-colleague>li:last-child {
    border-bottom: none;
}
.main-myColl-colleague .company_list_item .main-colleague>li .right_img {
    width: 1rem;
    height: 1rem;
    margin: 0.19rem;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
}
.main-myColl-colleague .company_list_item .main-colleague>li .right_img img {
    width: 1rem;
    height: 1rem;
    max-width: 100%;
    max-height: 100%;
}
.main-myColl-colleague .company_list_item .main-colleague>li .right_center_desc {
  width: 4rem;
  text-align: left;
  margin: 0.26rem 0.1rem 0.26rem 0;
}
.main-myColl-colleague .company_list_item .main-colleague>li .right_center_desc h5 {
  font-size: 0.28rem;
  color: #333;
  line-height: 0.46rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.main-myColl-colleague .company_list_item .main-colleague>li .right_center_desc p {
  font-size: 0.24rem;
  color: #999;
  line-height: 0.46rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.main-myColl-colleague .company_list_item .main-colleague>li .right_notice button {
  font-size: 0.22rem;
  color: #fff;
  line-height: 0.42rem;
  background-color: #e50838;
  border-radius: 4px;
  border: 1px solid #e50838;
  padding: 0.04rem 0.2rem;
}
.main-myColl-colleague .company_list_item .main-colleague>li .right_notice .right_refused {
  background-color: transparent;
  border: 1px solid #999;
  color: #999;
}

/* 热销产品为空 */
.company_list_item .emptyProduct {
  padding: 0 0 0.2rem;
  box-sizing: border-box;
}
.company_list_item .emptyProduct img {
  width: 1.56rem;
  height: 1.22rem;
  margin: 0 auto;
}
.company_list_item .emptyProduct p {
  font-size: 0.26rem;
  color: #999;
  text-align: center;
}

/* 公司同事 */
/* .main-company-colleague {
  margin-top: 0.2rem;
} */
.company_list_item {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
</style>
<style lang="scss" scoped>
//添加同级和下级弹框
.dialog {
  width: 6rem;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  font-size: 0.32rem;
  z-index: 10;
  &__wrap {
  }
  &__background {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
  }
  &__head {
    padding: 0.2rem 0.3rem;
    line-height: 1;
    &__title {
      line-height: 1;
      font-size: 0.28rem;
      color: #333;
    }
    &__btn {
      line-height: 1;
      float: right;
      font-size: 0.28rem;
      color: #999;
      // -webkit-text-stroke-width: 0.02rem;   //加粗字体图标
    }
  }
  &__body {
    padding: 0.1rem;
    color: #666;
    font-size: 0.28rem;
    white-space: normal;
    word-break: break-all;
    &__top {
      border-bottom: 1px solid #d8d8d8;
      &__img {
        width: 1rem;
        height: 1rem;
        margin: 0.1rem;
        img {
          width: 100%;
          border-radius: 50%; 
        }
      }
      &__desc {
        text-align: left;
        margin: 0.13rem;
        width: 4rem;
        h5 {
          font-size: 0.28rem;
          color: #333;
          line-height: 0.46rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          overflow: hidden;
          span {
            font-size: 0.24rem;
            color: #999;
            display: inline-block;
            margin-left: 0.1rem;
          }
        }
        p {
          font-size: 0.24rem;
          color: #999;
          line-height: 0.46rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    &__bottom {
      text-align: left;
      padding: 0.12rem;
      label {
        font-size: 0.24rem;
        color: #333;
        line-height: 0.46rem;
        display: inline-block;
      }
      span {
        font-size: 0.24rem;
        color: #999;
        line-height: 0.46rem;
        display: inline-block;
        .icon-xialaanniu {
          font-size: 0.24rem;
          color: #999;
          margin-left: 0.1rem;
        }
      }
    }
  }
  &__footer {
	font-size: 0;
  line-height: 1;
  padding: 0.2rem 0;
    .dialogbtnner {
		    font-size: .22rem;
        background-color: #e50838;
        border-top: 1px solid #e50838;
        width: 1rem;
        padding: .08rem 0;
        color: #fff;
        border-radius: 4px;
        margin: 0 0.1rem;
    }
    .dialogbtnner:first-child {
      background-color: #fff;
      color: #e50838;
      border: 1px solid #e50838;
    }
  }
}
.background-fade {
  &-enter {
    opacity: 0;
  }
  &-enter-active {
    transition: opacity 0.2s;
  }
  &-enter-top {
    opacity: 1;
  }
  &-leave {
    opacity: 1;
  }
  &-leave-active {
    transition: opacity 0.2s;
    opacity: 0;
  }
}
.fade-move {
  &-enter {
    opacity: 0.6;
    top: 45%;
  }
  &-enter-active {
    transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  &-enter-to {
    opacity: 1;
    top: 50%;
  }
  &-leave {
  }
  &-leave-active {
  }
  &-leave-to {
  }
}

</style>
